<template>
  <wd-segmented
    :options="options"
    v-model:value="currentValue"
    :size="size"
    :custom-color="customColor"
    :disabled="disabled"
    @change="handleChange"
  ></wd-segmented>
</template>

<script lang="ts" setup>
import { ref, watch, withDefaults } from 'vue'

interface SegmentedOption {
  value: string | number
  disabled?: boolean
}

interface Props {
  modelValue?: string | number
  options: SegmentedOption[]
  size?: 'large' | 'middle' | 'small'
  customColor?: string
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  size: 'small',
  disabled: false
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number): void
  (e: 'change', value: string | number): void
}>()

const currentValue = ref(props.modelValue)

// 监听外部传入的 modelValue 变化
watch(
  () => props.modelValue,
  newVal => {
    currentValue.value = newVal
  }
)

// 处理值变化
const handleChange = (value: SegmentedOption) => {
  emit('update:modelValue', value.value)
  emit('change', value.value)
}
</script>

<style lang="scss" scoped>
// 可以添加自定义样式覆盖
:deep(.wd-segmented) {
  &.is-small {
    --wot-segmented-height: 24px;
    --wot-segmented-font-size: 12px;
  }

  &.is-medium {
    --wot-segmented-height: 32px;
    --wot-segmented-font-size: 14px;
  }

  &.is-large {
    --wot-segmented-height: 40px;
    --wot-segmented-font-size: 16px;
  }
}
</style>
